<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .content {
            width: 800px;
            height: 40px;
            margin: 100px auto;
        }

        .content .nav-wrapper {
            width: 100%;
            height: 40px;
            background-color: #f5f5f5;
        }

        .content .nav-wrapper .nav-item {
            float: left;
            height: 40px;
            padding: 0 10px;
            line-height: 40px;
            text-align: center;
        }

        .content .nav-wrapper .nav-item.active {
            background-color: red;
            color: #fff;
        }

        .content .nav-des .nav-item {
            display: none;
        }

        .content .nav-des .nav-item.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="content">
        <ul class="nav-wrapper">
            <li class="nav-item active">商品介绍</li>
            <li class="nav-item">规格与包装</li>
            <li class="nav-item">售后保障</li>
            <li class="nav-item">商品评价（50000）</li>
            <li class="nav-item">手机社区</li>
        </ul>
        <ul class="nav-des">
            <li class="nav-item active">商品介绍模块内容</li>
            <li class="nav-item">规格与包装模块内容</li>
            <li class="nav-item">售后保障内容</li>
            <li class="nav-item">商品评(50000)内容</li>
            <li class="nav-item">手机社区内容</li>
        </ul>
    </div>
    <script>
        var navLis = document.querySelectorAll('.nav-wrapper .nav-item');
        var desLis = document.querySelectorAll('.nav-des .nav-item');

        //    1.移除之前的active
        // 遍历所有的li

        for (var i = 0; i < navLis.length; i++) {
            navLis[i].tagetIndex = i;
            navLis[i].onclick = function () {

                var preActiveItem = document.querySelector('.nav-wrapper .nav-item.active')
                // 如果当前正好包含 active 标签,则什么都不做
                // 否则移除当前的 active 标签
                if (this.classList.contains('active')) {
                    return;
                } else {
                preActiveItem.classList.remove('active');
                }
                //    2.新增自身的active
                this.classList.add('active');
                // //    3.des的绑定
                var preDesActiveItem = document.querySelector('.nav-des .nav-item.active');
                preDesActiveItem.classList.remove('active');
                desLis[this.tagetIndex].classList.add('active');
            }

        }
    </script>
</body>

</html>